<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation 
	<a class="m-link" href="https://material.angular.io/components/snack-bar/overview" target="_blank">demos & documentation</a>
</m-notice>

<div class="row">
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleBasic">
			<div class="m-section">
				<span class="m-section__sub">
					<mark>MatSnackBar</mark> is a service for displaying snack-bar notifications.
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="m-section__content">
					<mat-form-field>
						<input matInput value="Disco party!" placeholder="Message" #message>
					</mat-form-field>

					<mat-form-field>
						<input matInput value="Dance" placeholder="Action" #action>
					</mat-form-field>

					<button mat-button (click)="openSnackBar(message.value, action.value)">Show snack-bar</button>
				</div>
			</div>
		</m-material-preview>
		<m-material-preview [viewItem]="exampleCustom">
			<div class="m-section">
				<div class="m-section__content">
					<button mat-button (click)="openSnackBar2()" aria-label="Show an example snack-bar">
						Pizza party
					</button>
				</div>
			</div>
		</m-material-preview>
	</div>
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleDismissal">
			<div class="m-section">
				<span class="m-section__sub">
					<mark>Dismissal</mark> example with 6 seconds duration
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="m-section__content">
					<mat-form-field>
						<input matInput value="Disco party!" placeholder="Message" #message>
					</mat-form-field>

					<mat-form-field>
						<input matInput value="Dance" placeholder="Action" #action>
					</mat-form-field>

					<button mat-button (click)="openSnackBar3(message.value, action.value)">Show snack-bar</button>

				</div>
			</div>
		</m-material-preview>
	</div>
</div>